<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix " style="text-align: left">
      <span>著名诗人</span>
    </div>
    <el-row :gutter="16">
      <span class="suggest-author" v-for="(item,index) in author" :key="index" @click="goAuthorItem(item.aid, item.author)">
        {{item.author}}
      </span>
    </el-row>
  </el-card>

</template>

<script>

import router from '@/router'

export default {
  //展示的数据放在vuex里
  name: "Slide",
  data() {
    return {
      author: [
        {aid:1,author:'李白'},
        {aid:2,author:'杜甫'},
        {aid:3,author:'苏轼'},
        {aid:4,author:'白居易'},
        {aid:5,author:'辛弃疾'},
        {aid:6,author:'王维'},
        {aid:7,author:'李商隐'},
        {aid:8,author:'李清照'},
        {aid:9,author:'陆游'},
        {aid:10,author:'欧阳修'},
      ]
    }
  },
 methods:{
   goAuthorItem(id, bread) {
     //在出发地印上目的地的名字
     this.$route.meta.toBreadName = bread;
     router.push(`/authorItem/${id}`)
   },

 }
}
</script>

<style lang="scss" scoped>
.suggest-author{
  display: inline-block;
  text-align: center;
  border: 1px solid #6abb78;
  border-radius: 8px;
  color: #fff;
  background: #6abb78;
  padding: 2px 6px;
  margin: 3px 3px;
  &:hover{
    cursor: pointer;
    transition: opacity .3s ;
    opacity: .3;
  }
}
</style>